<div class="layui-form layui-field-box">
    <div class="layui-form-item" style="margin:0;margin-top:15px;">
        <div class="layui-inline">
            <label class="layui-form-label" style="width:130px">活动主题</label>
            <div class="layui-input-inline layui-short-input">
                <input type="text" placeholder="活动主题名称" name="{{makeElUniqueName('activity_name')}}" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">活动编号</label>
            <div class="layui-input-inline layui-short-input">
                <input type="text" placeholder="活动编号" name="{{makeElUniqueName('activity_code')}}" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">活动类型</label>
            <div class="layui-input-inline layui-short-input">
                <select name="{{makeElUniqueName('partner_group_type')}}">
                    <option value="0">(所有活动类型)</option>
                    @foreach (\App\Activity::$ACTIVITY_TYPE_MAP as $item)
                        <option value='{{$item['key']}}'>{{$item['text']}}</option>
                    @endforeach
                </select>
            </div>
            <div class="layui-input-inline" style="width:auto">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin:0;">
        <div class="layui-inline">
            <label class="layui-form-label" style="width:130px">举办活动城市</label>
            <div class="layui-input-inline layui-short-input">
                <select name="{{makeElUniqueName('activity_city')}}" lay-filter="{{makeElUniqueName('activity_city')}}" lay-search>
                    <option value="0">(不限城市)</option>
                    @foreach ($properCities as $city)
                        <option value='{{$city->id}}'>{{ $city->name }}({{ $city->code }})</option>
                    @endforeach
                </select>
            </div>
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-inline layui-short-input">
                <input class="layui-input" placeholder="开始日" name="{{makeElUniqueName('start_create_dt')}}">
            </div>
            <label class="layui-form-label">----到----</label>
            <div class="layui-input-inline layui-short-input">
                <input class="layui-input" placeholder="结束日" name="{{makeElUniqueName('end_create_dt')}}">
            </div>
            <div class="layui-input-inline" style="width:auto">
            </div>
        </div>
    </div>

    <div class="layui-form-item" style="margin:0;">
        <div class="layui-inline">
            <label class="layui-form-label" style="width:130px">最低需求人数</label>
            <div class="layui-input-inline layui-short-input">
                <input type="text" placeholder="最低需求人数" name="{{makeElUniqueName('activity_min_volunteer_num')}}" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">活动时间</label>
            <div class="layui-input-inline layui-short-input">
                <input class="layui-input" placeholder="开始日" name="{{makeElUniqueName('start_activity_dt')}}">
            </div>
            <label class="layui-form-label">----到----</label>
            <div class="layui-input-inline layui-short-input">
                <input class="layui-input" placeholder="结束日" name="{{makeElUniqueName('end_activity_dt')}}">
            </div>
            <div class="layui-input-inline" style="width:auto">
            </div>
        </div>
    </div>

    <div class="layui-form-item" style="margin:0;">
        <div class="layui-inline">
            @if (!$isExternalGroup)
            <label class="layui-form-label" style="width:130px">举办团队</label>
            <div class="layui-input-inline layui-long-input" style="width:440px !important">
                <input type="text" placeholder="志愿者团队名称/营业执照号/本平台编号" name="{{makeElUniqueName('group_name')}}" autocomplete="off" class="layui-input">
            </div>
            @endif
            <label class="layui-form-label" {{ $isExternalGroup?'style="width:130px"':'' }}>审核状态</label>
            <div class="layui-input-inline layui-short-input">
                <select name="{{makeElUniqueName('audit_status')}}">
                    <option value="0">(请选择审核状态)</option>
                    @foreach (\App\Activity::$AUDIT_STATUS_MAP as $item)
                        @if ($item['key'] == \App\Activity::$AUDIT_STATUS_DRAFT || $item['key'] == \App\Activity::$AUDIT_STATUS_DENIED)
                        <option value='{{$item['key']}}'>{{$item['text']}}</option>
                        @endif
                    @endforeach
                </select>
            </div>
            <div class="layui-input-inline" style="width:auto">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin:0;">
        <div class="layui-inline">
            <label class="layui-form-label" style="width:130px"></label>
            <div class="layui-input-inline layui-long-input">
                <button class="layui-btn" lay-filter="{{makeElUniqueName('search_activity')}}"><i class="layui-icon">&#xe615;</i> 搜索</button>&nbsp;
                <button class="layui-btn layui-btn-normal" lay-filter="{{makeElUniqueName('add_activity')}}"><i class="layui-icon">&#xe654; </i> 新增</button>
            </div>
            <label class="layui-form-label"></label>
            <div class="layui-input-inline layui-short-input">
            </div>
            <div class="layui-input-inline" style="width:auto">
            </div>
        </div>
    </div>
</div>
<div id="{{makeElUniqueName('tbActivity')}}"></div>
<script>
layui.use(['jfTable', 'form', 'addressUtil', 'dateRangeUtil'], function(){
    var layer = layui.layer;
    var $ = layui.jquery;
    var jfTable = layui.jfTable;
    var form = layui.form();
    var addressUtil = layui.addressUtil;
    var dateRangeUtil = layui.dateRangeUtil;

    form.render();

    dateRangeUtil.makeDateRange({
        startElem:$('input[name=\'{{makeElUniqueName('start_create_dt')}}\']'),
        endElem:$('input[name=\'{{makeElUniqueName('end_create_dt')}}\']')
    });

    dateRangeUtil.makeDateRange({
        startElem:$('input[name=\'{{makeElUniqueName('start_activity_dt')}}\']'),
        endElem:$('input[name=\'{{makeElUniqueName('end_activity_dt')}}\']')
    });

    layui.define(function(exports){
        var obj = {
            doEdit:function(permissionId) {
                $.get('/backstage/navi-permission/edit/'+ permissionId, {}, function(str){
                    var popLayerUtil = layui.popLayerUtil;
                    popLayerUtil.doPopUp({
                        index: layer.open({
                            id: '{{makeElUniqueName('editNavi')}}',
                            title: '修改活动',
                            type: 1,
                            content: str,
                            area: ['800px', '370px']
                        }),
                        onClose: function() {
                            layui.inactivityQueryFuncs.refreshTableGrid();
                        }
                    });
                });
            },
            toAudit:function(activityId) {
                layer.confirm('确定提交审核？', {
                    btn: ['确定','放弃'],
                    icon: 3
                }, function(){
                    var index = layer.load(1);
                    $.ajax({
                        contentType: "application/json",
                        type: 'post',
                        url: '/backstage/api/inact-activity/toaudit',
                        data: JSON.stringify({
                            activity_id: activityId
                        }),
                        success: function (outResult) {
                            layer.close(index);
                            if (outResult.Success) {
                                layer.msg(outResult.Message, { icon: 6 });
                                layui.inactivityQueryFuncs.refreshTableGrid();
                            } else {
                                layer.msg(outResult.Message, { icon: 5 });
                            }
                        },
                        error: function (error) {
                            layer.close(index);
                            layui.validator.processValidateError(error);
                        }
                    });
                }, function(){
                });
            },
            doDelete:function(permissionId) {
                layer.confirm('确定删除该活动？', {
                    btn: ['确定','放弃'],
                    icon: 3
                }, function(){
                    var index = layer.load(1);
                    $.ajax({
                        contentType: "application/json",
                        type: 'post',
                        url: '/backstage/api/navi-permission/delete',
                        data: JSON.stringify({
                            id: permissionId
                        }),
                        success: function (outResult) {
                            layer.close(index);
                            if (outResult.Success) {
                                layer.msg(outResult.Message, { icon: 6 });
                                layui.inactivityQueryFuncs.refreshTableGrid();
                            } else {
                                layer.msg(outResult.Message, { icon: 5 });
                            }
                        },
                        error: function (error) {
                            layer.close(index);
                            layui.validator.processValidateError(error);
                        }
                    });
                }, function(){
                });
            },
            refreshTableGrid: function() {
                $('input[name=\'{{makeElUniqueName('navi_name')}}\']').val('');
                $("#{{makeElUniqueName('tbActivity')}}").jfTable("reload");
            }
        };
        exports('inactivityQueryFuncs', obj);
    });

    $("#{{makeElUniqueName('tbActivity')}}").jfTable({
        url: '/backstage/api/inact-activity/query',
        pageSize:5,
        page: true,
        skip: true,
        first:'首页',
        last:'尾页',
        columns: [{
            text:'操作',
            name: 'id',
            width: 300,
            align: 'center',
            formatter: function(value, dataItem, index) {
                var html = '<a class="layui-btn layui-btn-small layui-btn-normal" onclick="layui.inactivityQueryFuncs.doEdit(' + value + ')"><i class="layui-icon">&#xe642;</i> 编辑</a>';
                html += '&nbsp;&nbsp;<a class="layui-btn layui-btn-small layui-btn-danger" onclick="layui.inactivityQueryFuncs.doDelete(' + value + ')"><i class="layui-icon">&#xe640;</i> 删除</a>';
                html += '&nbsp;&nbsp;<a class="layui-btn layui-btn-small layui-btn-warning" onclick="layui.inactivityQueryFuncs.toAudit(' + value + ')"><i class="layui-icon">&#xe618;</i> 提交审核</a>';
                return html;
            }
        },{
            text:'活动代码',
            name: 'code',
            width: 100,
            align: 'center',
        },{
            text:'活动名称',
            name: 'subject',
            width: 170,
            align: 'center',
        },
        @if (!$isExternalGroup)
        {
            text:'主办单位',
            name: 'majorGroup.name',
            width: 170,
            align: 'center',
        },
        @endif
        {
            text:'审核状态',
            name: 'audit_status_text',
            width: 70,
            align: 'center',
            formatter:function(value, dataItem, index) {
                if (dataItem.audit_status == {{\App\Activity::$AUDIT_STATUS_CANCELLED}}) {
                    return '<span style="color:gray">' + value + '</span>';
                } else if (dataItem.audit_status == {{\App\Activity::$AUDIT_STATUS_DRAFT}}) {
                    return '<span style="color:blue">' + value + '</span>';
                } else if (dataItem.audit_status == {{\App\Activity::$AUDIT_STATUS_PERMITTED}}) {
                    return '<span style="color:green">' + value + '</span>';
                } else if (dataItem.audit_status == {{\App\Activity::$AUDIT_STATUS_DENIED}}) {
                    return '<span style="color:red">' + value + '</span>';
                }
                return value;
            }
        },{
            text:'报名时间',
            name: 'enter_time_start',
            width: 250,
            align: 'center',
            formatter:function(value, dataItem, index) {
                return dataItem.enter_time_start.substring(0, dataItem.enter_time_start.length - 3)
                    + ' <span style="color:orange">-</span> '
                    + dataItem.enter_time_end.substring(0, dataItem.enter_time_end.length - 3);
            }
        },{
            text:'活动时间',
            name: 'active_time_start',
            width: 250,
            align: 'center',
            formatter:function(value, dataItem, index) {
                return dataItem.active_time_start.substring(0, dataItem.active_time_start.length - 3)
                    + ' <span style="color:orange">-</span> '
                    + dataItem.active_time_end.substring(0, dataItem.active_time_end.length - 3);
            }
        },{
            text:'活动类型',
            name: 'activity_type_text',
            width: 70,
            align: 'center',
            formatter:function(value, dataItem, index) {
                if (dataItem.activity_type == {{\App\Activity::$ACTIVITY_TYPE_COMMUNITY}}) {
                    return '<span style="color:blue">' + value + '</span>';
                } else if (dataItem.activity_type == {{\App\Activity::$ACTIVITY_TYPE_OLDER}}) {
                    return '<span style="color:gray">' + value + '</span>';
                } else if (dataItem.activity_type == {{\App\Activity::$ACTIVITY_TYPE_GROUP}}) {
                    return '<span style="color:green">' + value + '</span>';
                } else if (dataItem.activity_type == {{\App\Activity::$ACTIVITY_TYPE_PARTY}}) {
                    return '<span style="color:red">' + value + '</span>';
                }
                return value;
            }
        }],
        method: 'get',
        queryParam: {
            subject:$('input[name=\'{{makeElUniqueName('activity_name')}}\']').val(),
            code:$('input[name=\'{{makeElUniqueName('activity_code')}}\']').val(),
            activityType:$('select[name=\'{{makeElUniqueName('partner_group_type')}}\']').val(),
            cityId:$('select[name=\'{{makeElUniqueName('activity_city')}}\']').val(),
            startCreateDt:$('input[name=\'{{makeElUniqueName('start_create_dt')}}\']').val(),
            endCreateDt:$('input[name=\'{{makeElUniqueName('end_create_dt')}}\']').val() != ''? ($('input[name=\'{{makeElUniqueName('end_create_dt')}}\']').val() + ' 23:59:59'):'',
            startActiveDt:$('input[name=\'{{makeElUniqueName('start_activity_dt')}}\']').val(),
            endActiveDt:$('input[name=\'{{makeElUniqueName('end_activity_dt')}}\']').val() != ''? ($('input[name=\'{{makeElUniqueName('end_activity_dt')}}\']').val() + ' 23:59:59'):'',
            minVolunteerNum:$('input[name=\'{{makeElUniqueName('activity_min_volunteer_num')}}\']').val(),
            auditStatus:$('select[name=\'{{makeElUniqueName('audit_status')}}\']').val(),
            @if (!$isExternalGroup)
            volunteerGroupInfo:$('input[name=\'{{makeElUniqueName('group_name')}}\']').val()
            @endif
        },
        toolbarClass: 'layui-btn-small',
        onBeforeLoad: function (param) {
            return $.extend(param, {
                subject:$('input[name=\'{{makeElUniqueName('activity_name')}}\']').val(),
                code:$('input[name=\'{{makeElUniqueName('activity_code')}}\']').val(),
                activityType:$('select[name=\'{{makeElUniqueName('partner_group_type')}}\']').val(),
                cityId:$('select[name=\'{{makeElUniqueName('activity_city')}}\']').val(),
                startCreateDt:$('input[name=\'{{makeElUniqueName('start_create_dt')}}\']').val(),
                endCreateDt:$('input[name=\'{{makeElUniqueName('end_create_dt')}}\']').val() != ''? ($('input[name=\'{{makeElUniqueName('end_create_dt')}}\']').val() + ' 23:59:59'):'',
                startActiveDt:$('input[name=\'{{makeElUniqueName('start_activity_dt')}}\']').val(),
                endActiveDt:$('input[name=\'{{makeElUniqueName('end_activity_dt')}}\']').val() != ''? ($('input[name=\'{{makeElUniqueName('end_activity_dt')}}\']').val() + ' 23:59:59'):'',
                minVolunteerNum:$('input[name=\'{{makeElUniqueName('activity_min_volunteer_num')}}\']').val(),
                auditStatus:$('select[name=\'{{makeElUniqueName('audit_status')}}\']').val(),
                @if (!$isExternalGroup)
                volunteerGroupInfo:$('input[name=\'{{makeElUniqueName('group_name')}}\']').val()
                @endif
            });
        },
        onLoadSuccess: function (data) {
            return data;
        },
        dataFilter:function (data) {
            return data;
        }
    });

    $('.layui-btn[lay-filter=\'{{makeElUniqueName('search_activity')}}\']').on('click', function(){
        $("#{{makeElUniqueName('tbActivity')}}").jfTable("reload");
    });

    /*addressUtil.twoLevelAddressSelect({
        provinceSelect: $('select[name=\'{{makeElUniqueName('activity_province')}}\']'),
        citySelect: $('select[name=\'{{makeElUniqueName('activity_city')}}\']'),
    });*/

    /*layui.define(function(exports){
        var obj = {
            doEdit:function(permissionId) {
                $.get('/backstage/navi-permission/edit/'+ permissionId, {}, function(str){
                    var popLayerUtil = layui.popLayerUtil;
                    popLayerUtil.doPopUp({
                        index: layer.open({
                            id: '{{makeElUniqueName('editNavi')}}',
                            title: '修改活动',
                            type: 1,
                            content: str,
                            area: ['800px', '370px']
                        }),
                        onClose: function() {
                            layui.inactivityQueryFuncs.refreshTableGrid();
                        }
                    });
                });
            },
            doDelete:function(permissionId) {
                layer.confirm('确定删除该活动？', {
                    btn: ['确定','放弃'],
                    icon: 3
                }, function(){
                    var index = layer.load(1);
                    $.ajax({
                        contentType: "application/json",
                        type: 'post',
                        url: '/backstage/api/navi-permission/delete',
                        data: JSON.stringify({
                            id: permissionId
                        }),
                        success: function (outResult) {
                            layer.close(index);
                            if (outResult.Success) {
                                layer.msg(outResult.Message, { icon: 6 });
                                layui.inactivityQueryFuncs.refreshTableGrid();
                            } else {
                                layer.msg(outResult.Message, { icon: 5 });
                            }
                        },
                        error: function (error) {
                            layer.close(index);
                            layui.validator.processValidateError(error);
                        }
                    });
                }, function(){
                });
            },
            refreshTableGrid: function() {
                $('input[name=\'{{makeElUniqueName('navi_name')}}\']').val('');
                $("#{{makeElUniqueName('tbActivity')}}").jfTable("reload");
            }
        };
        exports('inactivityQueryFuncs', obj);
    });

    $("#{{makeElUniqueName('tbActivity')}}").jfTable({
        url: '/activity/activity',
        pageSize:5,
        page: true,
        skip: true,
        first:'首页',
        last:'尾页',
        columns: [{
            text:'操作',
            name: 'id',
            width: 180,
            align: 'center',
            formatter: function(value, dataItem, index) {
                var html = '<a class="layui-btn layui-btn-small layui-btn-normal" onclick="layui.inactivityQueryFuncs.doEdit(' + value + ')"><i class="layui-icon">&#xe642;</i> 编辑</a>';
                html += '&nbsp;&nbsp;<a class="layui-btn layui-btn-small layui-btn-danger" onclick="layui.inactivityQueryFuncs.doDelete(' + value + ')"><i class="layui-icon">&#xe640;</i> 删除</a>';
                return html;
            }
        },{
            text:'活动名称',
            name: 'subject',
            width: 70,
            align: 'center',
        },{
            text:'活动类型',
            name: 'activity_type',
            width: 70,
            align: 'center',
            formatter:function(value,dataItem,index){
                var html = ""
                if (value == null) {
                    html = "";
                } else {
                    html = "<i class=\"layui-icon\" style=\"top: 3px;\">"+value+"</i>"
                }
                return html;
            }
        },{
            text:'报名起始时间',
            name: 'enter_time_start',
            width: 100,
            align: 'center',
            formatter:function(value,dataItem,index){
                var html = ""
                if (value == null) {
                    html = "";
                } else {
                    html = "<i class=\"layui-icon\" style=\"top: 3px;\">"+value+"</i>"
                }
                return html;
            }
        },{
            text:'报名结束时间',
            name: 'enter_time_end',
            width: 100,
            align: 'left',
        },{
            text:'活动起始时间',
            name: 'active_time_start',
            width: 100,
            align: 'left',
        },{
            text:'活动结束时间',
            name: 'active_time_end',
            width: 100,
            align: 'left',
        },{
            text:'审核状态',
            name: 'audit_status',
            width: 70,
            align: 'left',
        },{
            text:'活动状态',
            name: 'status',
            width: 70,
            align: 'left',
        }],
        method: 'get',
        queryParam: {
            permissionName:$('input[name=\'{{makeElUniqueName('navi_name')}}\']').val()
        },
        toolbarClass: 'layui-btn-small',
        onBeforeLoad: function (param) {
            return $.extend(param, {
                permissionName:$('input[name=\'{{makeElUniqueName('navi_name')}}\']').val()
            });
        },
        onLoadSuccess: function (data) {
            return data;
        },
        dataFilter:function (data) {
            return data;
        }
    });

    $('.layui-btn[lay-filter=\'{{makeElUniqueName('search_navi')}}\']').on('click', function(){
        $("#{{makeElUniqueName('tbActivity')}}").jfTable("reload");
    });

    $('.layui-btn[lay-filter=\'{{makeElUniqueName('add_navi')}}\']').on('click', function(){
        $.get('/activity/create_act', {}, function(str){
            var popLayerUtil = layui.popLayerUtil;
            popLayerUtil.doPopUp({
                index: layer.open({
                    id: '{{makeElUniqueName('createAct')}}',
                    title: '新建活动',
                    type: 1,
                    content: str,
                    area: ['900px', '500px']
                }),
                onClose: function() {
                    layui.inactivityQueryFuncs.refreshTableGrid();
                }
            });
        });
    });*/
});
</script>
